<template>
    <div class="modify-score">
        <!-- 查询学生 -->
        <header class="modify-header">
            <div class="left">
                <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
                <span>|</span>
                <span>添加学生到课程</span>
            </div>
            <div class="right">
                课程管理系统
            </div>
        </header>
        <main class="modify-main">
            <div class="query-container">
                <label style="margin-right: 10px">输入学生姓名：</label>
                <el-input v-model="input" placeholder="请填学生姓名" style="width: 180px" type="info" clearable @clear=""
                    @keyup.enter.native="getStudentList()" />
                <el-button class="normal-btn continue" @click="getStudentList()" icon="el-icon-search">
                    查询
                </el-button>
            </div>
            <!-- 成绩表 -->
            <div class="score-table-container">
                <el-table :data="StudentList" stripe class="data_table">
                    <el-table-column prop="className" label="班级名称">
                    </el-table-column>
                    <el-table-column prop="studentName" label="学生姓名">
                    </el-table-column>
                    <el-table-column prop="studentNumber" label="学生学号">
                    </el-table-column>
                    <el-table-column label="操作" width="150px" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" class="blueBug" @click="addStudentHandle(scope.row.id)">
                                添加学生
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>
    </div>
</template>

<script>
import { queryStudentAPI, addSudentCourseRecordAPI } from '@/api/student/queryStudent'


export default {
    name: 'timeTable',
    data() {
        return {
            input: '',
            StudentList: [],
            courseId: '',
        }
    },
    created() {

    },
    mounted() {
        this.courseId = this.$route.query.courseId
    },
    methods: {
        getStudentList() {
            queryStudentAPI(this.input).then((res) => {
                if (res.code === 200) {
                    this.StudentList = res.data
                } else {
                    this.$message.error('搜索学生失败！')
                }
            }).catch((error) => {
                console.log(error);
            })
        },
        //添加学生按钮
        addStudentHandle(studentId) {
            //这里我们只将该学生添加到该课程，成绩部分先不设置
            let bodyData = {
                studentId: studentId,
                courseId: this.courseId,
                attendanceScore: '',
                assignmentScore: '',
                examScore: '',
                totalScore: '',

            }
            addSudentCourseRecordAPI(bodyData).then((res) => {
                if (res.code === 200) {
                    if (res.data === 30005) {
                        this.$message.success('重复加入课程,添加该学生失败')
                    }
                    this.$message.success('添加该学生成功')
                }
            }).catch((res) => {
                console.log(res.message)
            })
        }

    }
}
</script>

<style lang="scss" scoped>
//主容器
.timetable-containe {
    position: relative;
}

//成绩表
.score-table-container {
    margin-top: 50px;
    margin-right: 10px;
    margin-bottom: 50px;
    margin-left: 10px;

}

//查询框
.query-container {
    position: absolute;
    right: 450px;
}

.modify-score {
    background-color: #f4f6f8;
    height: 100vh;

    .modify-header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .modify-main {
        background: #f4f6f8;
        padding: 20px 450px;

        .form-container {
            background-color: #fff;
            padding-left: 300px;
            padding-right: 300px;
            padding-bottom: 100px;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }
    }

    .modify-footer {
        position: fixed;
        bottom: 10px;
        width: 100%;
        padding: 30px 50px;
        color: #000000d9;
        font-size: 18px;
        background: #fff;
        text-align: center;
    }

}
</style>
